<template lang="pug">
    el-container(style="height: 100%")
      el-aside(class="left" width="200px" style="background-color: rgba(0,25,46,1)")
        sidebar
      el-container
        mapContainer(style="background-color: black; background-image:url('static/image/bg_image.jpg') " @loadeds="")
        router-view
</template>

<script>
  import sidebar from "../components/sideBar";
  import mapContainer from "../components/mapContainer";

  export default {
    name: "Home",
    components: {
      sidebar,
      mapContainer
    },
  }
</script>

<style lang="stylus" scoped>
  .el-aside
    background-color: rgba(0,25,46,1);
    overflow-y:scroll;
    overflow-x: hidden;
    scrollbar-arrow-color:#ffd04b;
    scrollbar-base-color:red

    &::-webkit-scrollbar {/*滚动条整体样式*/
      width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/
      height: 1px;
    }
    &::-webkit-scrollbar {/*滚动条整体样式*/
      width: 5px;     /*高宽分别对应横竖滚动条的尺寸*/
      height: 1px;
    }

    &::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
      border-radius: 10px;
      -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
      background: #ffd04b;
    }

    &::-webkit-scrollbar-track {/*滚动条里面轨道*/
      -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
      border-radius: 10px;
      background: #EDEDED;
    }

</style>
